<template>
	<div class="pageContent" v-if="1">
		<image class="loginIm" :src="images +'/loginBack.png'"></image>
		<view class="loginTap">
			<image class="loginIc" :src="localImages +'/mainIcon.png'" @click="doubleClick"></image>
			<view class="loginTil">世纪金源服务集团有限公司</view>
		</view>
		<view class="loginCom">
			<image class="loginTeIm" :src="images +'/loginText.png'" mode="widthFix"></image>
			<view class="loginComTe">全国服务热线：400-991-5888</view>
		</view>

		<view class="handler">
			<button class="btOne btDefalt" @click="returnMain">取消</button>
			<button class="btOne check" v-if="checked" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信登录</button>
			<button class="btOne uncheck" v-else @click="checkTest">微信登录</button>
		</view>
		<view class="agree">
			<view class="btOne" :class="{'show' : show}">请阅读并勾选</view>
			<view class="agree-check" @click="checkChange">
				<view class="sc-checkbox" :class="{'check' : checked}"></view>
				<text>我已阅读并同意</text>
			</view>

			<text @click="pdfOpenService">《世纪金源物业用户服务协议》</text>
			<text @click="pdfOpenPolicy">《世纪金源物业隐私政策》</text>
		</view>
		<!-- <button class="btOne" open-type="getUserInfo" @getuserinfo="getUser">微信授权登</button> -->
		<view class="modal-content show" v-if="showModal">
			<view class="modal-box" style="height:280rpx; text-align: center;">
				<view>开启调试模式</view>
				<input class="memberItIn" placeholder-class="inputPlaceHold" v-model="secrect" placeholder="请输入调试密码" />
				<view class="modalBot modalCancel">
					<view class="btnConfirm btnCancel" @click='onCancel'>取消</view>
					<view class="btnConfirm" @click='onConfirm'>确定</view>
				</view>
			</view>
		</view>
	</div>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				showModal: 0,
				secrect: '',
				checked:false,
				show:false,
			}
		},
		onLoad(options) {
			console.warn('options', options)
			if (options.userInfo) {
				var userInfo = JSON.parse(options.userInfo)
				wx.setStorageSync('userInfo', userInfo)
			}
			//在登录界面先获取下session信息，避免登录时，后台无法获取手机号
			this.getOpenId();

		},
		methods: {
			//0.3s内双击
			doubleClick() {
				var now = new Date();
				if (now - this.previous < 300) {
					this.showModal = true
				}
				this.previous = now;
			},
			onConfirm() {
				if (this.secrect == '666') {
					// this.showModal = false
					wx.navigateTo({
						url: '/pages/index/test',
					})
				} else {
					wx.showToast({
						title: '密码错误',
						icon: 'none',
						duration: 1000
					})
				}
			},
			onCancel() {
				console.log('cancel')
				this.showModal = false
			},

			async getOpenId() {
				var res = await this.wxLogin();
				//通过 wx.login 接口获得临时登录凭证 code 授权
				var jsCode = res.code
				var url = '/UserServer/weChat/getWxCode2Session'
				var params = {
					js_code: jsCode
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options)
				wx.setStorageSync('openId', param.openid);
			},
			wxLogin() {
				return new Promise((resolve, reject) => {
					wx.login({
						complete: (res) => {
							resolve(res)
						},
					})
				})
			},
			//获取用户手机号码
			async getPhoneNumber(userInfo) {
				let self = this;
				console.warn('userInfo', userInfo);
				if(!this.checked) return
				var phoneInfo = userInfo.detail
				if (!phoneInfo.iv) {
					wx.showToast({
						title: '请允许授权登录',
						icon: 'none',
						duration: 1000
					})
					return
				}
				wx.removeStorageSync('token') //移除token
				var res = await self.wxLogin();
				var jsCode = res.code
				var url = '/UserServer/weChat/getWxUserOpenId'
				var params = {
					encryptedData: phoneInfo.encryptedData,
					iv: phoneInfo.iv,
					js_code: jsCode
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options)
				console.log('param', param)
				if (param) {
					var phoneNumber = param.phoneNumber;
					// var phoneNumber = 18874183955; //测试登录手机号
					if (phoneNumber) {
						wx.setStorageSync('phone', phoneNumber);
						self.ownerRoomList(phoneNumber)
					} else if (param.statusCode == 200) {
						console.log('param', param.statusCode == 200)
						//在当前页面停留超过5分钟，jsCode失效，需要重新获取
						wx.showToast({
							title: '请重新获取手机号',
							icon: 'none'
						})
					}
				}
			},
			async ownerRoomList(phoneNumber) {
				//获取业主该手机号绑定的房屋列表
				var url = '/UserServer/room/ownerRoomList'
				var params = {
					telephone: phoneNumber
				}
				var options = {
					url,
					params,
				}
				var param = await util.requestPro(options)
				console.log('ownerRoomList', param)
				//未录入用户
				if (!Array.isArray(param)) {
					console.log('param.length', param.length)
					getApp().globalData.roomList = ''
					wx.navigateTo({
						url: '/pages/index/select'
					})
				} else if (param.length == 1) {
					// 一个房屋，直接登录
					var room = param[0];
					getApp().noticeList(room)
				} //用户有多个房屋
				else if (param.length > 1) {
					//缓存room列表
					getApp().globalData.roomList = param
					wx.redirectTo({
						url: '/pages/index/select'
					})
				}
			},
			
			returnMain() {
				wx.reLaunch({
					url: '/pages/index/index'
				})
			},
			
			checkChange(){
				this.checked=!this.checked
				this.show=false
			},
			
			checkTest(){
				this.show=true
			},
			
			pdfOpenService(){
				var url='https://anbot.icentown.com/minIO/guidance/User-Service-Agreement-0423.pdf'
				this.pdfOpen(url)
			},
			pdfOpenPolicy(){
				var url='https://anbot.icentown.com/minIO/guidance/privacy-policy-0425.pdf'
				this.pdfOpen(url)
			},
			
			pdfOpen(url = '') {
				wx.showLoading({
					title: '',
					duration: 800
				})
				var url= url || 'https://image.xsyxsc.com/user/qualification/9ad27b8391bf41269e7af36c337c23cc.pdf'
				console.log('url', url)
				wx.downloadFile({
					url: url,
					success(res) {
						const filePath = res.tempFilePath
						console.log('res', res)
						wx.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log('打开文档成功')
							}
						})
					},
					fail(res) {
						console.log('fail=', res)
					},
					complete(res){
						
					}
				})
			},
			
		},

	}
</script>


<style lang="scss" scoped>
	.pageContent {}

	.loginIm {
		width: 630rpx;
		height: 456rpx;
		margin: 100rpx 0rpx 150rpx 60rpx;
	}

	.loginTap {
		display: flex;
		justify-content: center;
	}

	.loginIc {
		width: 50rpx;
		height: 50rpx;
		margin-right: 16rpx;
	}

	.loginTil {
		font-size: 42rpx;
		font-weight: bold;
		color: #333333;
		font-family: HanziPenSC;
	}

	.loginCom {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.loginTeIm {

		width: 220rpx;
		height: 40rpx;


		margin-top: 38rpx;
	}

	.loginComTe {
		font-size: 26rpx;
		color: #1086FF;
		margin-top: 24rpx;
	}

	.handler {
		margin-top: 80rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
		border: 1px solid transparent;
		.btOne.check {
			width: 330rpx;
			border: 1px solid transparent;
		}
		.uncheck{
			width: 330rpx;
			background: #DDDDDD;
			color: #1086FF;
			box-shadow: 0px 13rpx 29rpx 0px #DDDDDD;
			border: 1px solid;
		}
		
		.btOne.btDefalt {
			width: 330rpx;
			background: #DDDDDD;
			color: #1086FF;
			box-shadow: 0px 13rpx 29rpx 0px #DDDDDD;
		}
	}



	.modal-content {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 999;
		text-align: left;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.modal-box {
		position: absolute;
		left: 50%;
		opacity: 0;
		top: 300rpx;
		width: 650rpx;
		height: 590rpx;
		border-radius: 24rpx;
		margin-left: -325rpx;
		background-color: #fff;
		transition: opacity 0.2s ease-in;
	}

	.modal-content.show .modal-box {
		opacity: 1;
	}

	.modalBot {
		position: absolute;
		display: flex;
		width: 460rpx;
		height: 110rpx;
		bottom: 0;
		left: 50%;
		margin-left: -230rpx;
		line-height: 80rpx;
		z-index: 99;
		/* border: 1rpx solid coral; */
	}

	.modalCancel {
		width: 600rpx;
		margin-left: -300rpx;
	}

	.memberItIn {
		width: 66vw;
		margin: auto;
		margin-top: 20rpx;
		line-height: 66rpx;
		height: 66rpx;
		font-size: 32rpx;
		border: 1rpx solid #007AFF;
	}

	.btnConfirm {
		flex: 1;
		height: 80rpx;
		color: #fff;
		font-size: 28rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 8rpx;
		background-color: #1A76FF;
	}

	.btnCancel {
		background-color: #ccc;
		margin: 0rpx 20rpx 0rpx 0rpx;
	}

	.close-modal {
		position: absolute;
		bottom: -140rpx;
		left: 50%;
		width: 64rpx;
		height: 64rpx;
		margin-left: -32rpx;
		z-index: 99;
	}
	
	.agree{
		line-height: 50rpx;
		padding: 60rpx 30rpx 80rpx 80rpx;
		// border: 1px solid;
		
		.btOne {
			background: #FF7522;
			color: #fff;
			text-align: center;
			box-shadow: 0px 10rpx 20rpx 0px #FF7522;
			font-size: 24rpx;
			width: 200rpx;
			margin-left: -50rpx;
			margin-bottom: 10rpx;
			opacity: 0;
			&::after{
				position: absolute;
				display: block;
				content: '';
				width: 0rpx;
				height: 0rpx;
				z-index: 10;
				margin-left: 10rpx;
				margin-top: -10rpx;
				border: 20rpx solid transparent;
				border-top: 20rpx solid #FF7522;
			}
		}
		
		.btOne.show{
			opacity: 1;
		}
		
		.agree-check{
			position: relative;
			display: inline-block;
			margin-left: -50rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
			// border: 1px solid;
			.sc-checkbox{
				position: relative;
				transform: scale(0.8);
			}
			text{
				color: #030303;
			}
		}
		text{
			color: #FF7522;
		}
	}
</style>
